<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:v-on="http://www.w3.org/1999/xhtml"
	  xmlns:v-bind="http://www.w3.org/1999/xhtml">

	<head>

		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">

		<title></title>
		<meta name="keywords" content="">
		<meta name="description" content="">

		<link rel="shortcut icon" href="../../../../static/favicon.ico" th:href="@{/favicon.ico}">

		<link rel="stylesheet" type="text/css" href="../../../../static/bootstrap/css/bootstrap.min.css" th:href="@{/bootstrap/css/bootstrap.min.css}" />
		<link rel="stylesheet" type="text/css" href="../../../../static/plugins/layui/css/layui.css" th:href="@{/plugins/layui/css/layui.css}" />
		<link rel="stylesheet" type="text/css" href="../../../../static/web/admin/css/font-awesome.css" th:href="@{/web/admin/css/font-awesome.css}" />
		<link rel="stylesheet" type="text/css" href="../../../../static/web/admin/css/style.css" th:href="@{/web/admin/css/style.css}" />

		<style type="text/css">
			table td,
			table th {
				text-align: center;
			}
		</style>
	</head>

	<body class="gray-bg">
		<div class="wrapper wrapper-content" id="body">
			<div class="row">
				<div class="col-sm-12">
					<div class="ibox float-e-margins">
						<div class="ibox-title">
							<h5>系统用户管理 <small>后台管理员用户管理</small></h5>
						</div>
						<div class="ibox-content">
							<div class="row">
								<div class="col-sm-5 m-b-xs">

									<div class="btn-group" id="exampleToolbar" role="group">
										<button type="button" class="btn btn-outline btn-default" v-on:click="add(undefined)">
                                        <i class="glyphicon glyphicon-plus" aria-hidden="true"></i>
                                    </button>
										<button type="button" class="btn btn-outline btn-default" v-on:click="del(undefined)">
                                        <i class="glyphicon glyphicon-trash" aria-hidden="true"></i>
                                    </button>
									</div>

								</div>
								<div class="col-sm-4 m-b-xs">
								</div>
								<div class="col-sm-3">
									<div class="input-group">
										<input type="text" v-model.trim="pageInfo.search" placeholder="请输入关键词" class="input-sm form-control"> <span class="input-group-btn">
                                        <button type="button" class="btn btn-sm btn-primary"  v-on:click="search"> 搜索</button> </span>
									</div>
								</div>
							</div>
							<div>
								<table class="table table-hover table-bordered">
									<thead>
										<tr>
											<th style="width: 50px;">
												<input type="checkbox" class="i-checks" v-on:click="select" v-model="selectAll">
											</th>
											<th>管理员基础信息</th>
											<th>联系信息</th>
											<th style="width: 50px;">操作</th>
										</tr>
									</thead>
									<tbody id="list">
										<tr v-for="(item, index) in list">
											<td>
												<input type="checkbox" v-bind:value="item.id" v-model="item.select" class="i-checks" />
											</td>
											<td>{{item.name}}[{{item.username}}]</td>
											<td>
												<a href="javascript:void(0);" v-bind:href="'mailto:'+item.email">
													<span class="label label-success" style="font-size: 1em;">{{item.email}}</span>
												</a>
												&nbsp;
												<span class="label label-success" style="font-size: 1em;">{{item.phone}}</span>
												<!--<a href="javascript:void(0);" v-bind:href="'tel:'+item.phone">
                                                </a>-->

											</td>
											<td>
												<div class="btn-group">
													<button data-toggle="dropdown" class="btn btn-white dropdown-toggle">操作 <span class="caret"></span>
                                </button>
													<ul class="dropdown-menu">
														<li>
															<a href="javascript:void(0);" v-on:click="update(item)" class="font-bold">修改管理员信息</a>
														</li>
														<li>
															<a href="javascript:void(0);" v-on:click="del(item)" class="font-bold">删除管理员账户</a>
														</li>
													</ul>
												</div>
											</td>
										</tr>
										<tr v-if="!list || list.length == 0" style="text-align: center;"><td colspan="4">没有更多内容</td></tr>
									</tbody>
								</table>
							</div>
							<div id="page"></div>
						</div>
					</div>
				</div>

			</div>

		</div>
		<script src="../../../../static/plugins/jquery.min.js" th:src="@{/plugins/jquery.min.js}" type="text/javascript" charset="utf-8"></script>
		<script src="../../../../static/bootstrap/js/bootstrap.min.js" th:src="@{/bootstrap/js/bootstrap.min.js}" type="text/javascript" charset="utf-8"></script>
		<script src="../../../../static/plugins/vuejs/vue.min.js" th:src="@{/plugins/vuejs/vue.min.js}" type="text/javascript" charset="utf-8"></script>
		<script src="../../../../static/plugins/layui/layui.js" th:src="@{/plugins/layui/layui.js}" type="text/javascript" charset="utf-8"></script>
		<script src="../../../../static/web/admin/js/content.js" th:src="@{/web/admin/js/content.js}" type="text/javascript" charset="utf-8"></script>
		<script th:inline="javascript">
            /*<![CDATA[*/
            var app;
            layui.use(['layer', 'laypage'], function () {
                app = new Vue({
                    el: '#body',
                    data: {
                        my: {},
                        selectAll: false,
                        list: [],
                        pageInfo: {
                            page: 1,
                            size: 10,
                            search: ""
                        },
                        info: {}
                    },
                    methods: {
                        search: function () {
                            this.loadPage(1);
                        },
                        add: function () {
                            var url = "adminInfo.html";
                            if(window.document.location.port*1 !== 63342){
                                url = window.document.location.pathname + "/add";
                            }
                            this.openUrl(url);
                        },
                        update: function (item) {
                            var url = "adminInfo.html";
                            if(window.document.location.port*1 !== 63342){
                                url = window.document.location.pathname + "/update_"+item.id;
							}
                            this.openUrl(url);
                        },
						openUrl:function (url) {
                            var index = layui.layer.open({
                                type: 2,
                                title: '系统管理员详细信息',
                                // shadeClose: true,
                                // shade: false,
                                maxmin: true, //开启最大化最小化按钮
                                area: ['893px', '600px'],
                                content: url
                            });
                            // layui.layer.full(index);
                        },
                        del: function (item) {
                            console.log(item);
                            var vue = this;
                            var data = {id: []};
                            var names = [];
                            if (item === undefined) {
                                for (var i in this.list) {
                                    var item1 = this.list[i];
                                    if (item1.select) {
                                        data.id.push(item1.id);
                                        names.push(item1.name);
                                    }
                                }
                            } else {
                                data.id.push(item.id);
                                names.push(item.name);
                            }
                            if (names.length === 0) {
                                layui.layer.msg("没有选择内容", {time: 20000, btn: ['明白了']});
                                return false;
                            }
                            layui.layer.confirm('您要删除【' + names.join("、") + '】吗？', {
                                btn: ['确定删除', '不，留着生孩子'] //按钮
                            }, function () {
                                layui.layer.prompt({
                                    formType: 1,
                                    value: "",
                                    title: '请验证当前用户密码'
                                }, function (value, index, elem) {
                                    layui.layer.close(index);
                                    data.password = value;
                                    data._method = "DELETE";
                                    $.ajax({
                                        type: "post",
                                        data: data,
                                        url: "",
                                        async: true,
                                        dataType: "json",
                                        success: function (data) {
                                            if (data.code === 0) {
                                                vue.loadPage(1);
                                            } else {
                                                layui.layer.msg(data.msg, {time: 20000, btn: ['明白了']}, function () {
                                                    vue.loadPage(1);
                                                });
                                            }
                                        },
                                        error: function () {
                                            layui.layer.msg("加载错误");
                                        }
                                    });
                                });
                            });
                        },
                        select: function () {
                            for (var i = 0; i < this.list.length; i++) {
                                this.list[i].select = this.selectAll;
                            }
                        },
                        loadPage: function (page) {
                            var vue = this;
                            if (page * 1 < 1) {
                                vue.pageInfo.page = 1;
                            } else if (page * 1 > 0) {
                                vue.pageInfo.page = page;
                            }
                            $.ajax({
                                type: "get",
                                data: vue.pageInfo,
                                url: "",
                                async: true,
                                dataType: "json",
                                success: function (data) {
                                    if (data.code === 0) {
                                        layui.layer.msg(data.msg);
                                        vue.my = data.bean;
                                        vue.list = data.list;
                                        layui.laypage.render({
                                            elem: "page",
                                            count: data.count,
                                            limit: vue.pageInfo.size,
                                            curr: data.pageCurr,
                                            groups: 10,
                                            jump: function (obj, first) {
                                                //得到了当前页，用于向服务端请求对应数据
                                                var curr = obj.curr;
                                                if (!first) { //点击跳页触发函数自身，并传递当前页：obj.curr
                                                    vue.loadPage(curr);
                                                }
                                            }
                                        });
                                    } else {
                                        vue.list = [];
                                        layui.layer.msg(data.msg, {time: 20000, btn: ['明白了']});
                                    }
                                },
                                error: function () {
                                    vue.list = [];
                                    layui.layer.msg("加载错误", {time: 5000, btn: ['明白了']});
                                }
                            });
                        }
                    },
                    mounted: function () {
                        this.loadPage(1);
                    }
                });
            });
            /*]]>*/
		</script>
	</body>

</html>